<template>
 <view class="card-item">
         <view class="item-content border-bottom">
           <view class="left-box">
             <image :src="mainteanceList.urgency === 0?'https://mkservice.mk-iot.com/subFile/mkApplet/report.png':'https://mkservice.mk-iot.com/subFile/mkApplet/setmaintenance.png'"
               mode="aspectFill"></image>
           </view>
           <view class="right-box">
             <view class="floor">{{mainteanceList.maintenanceCode}}
               <view class="level-tag"
                 :style="mainteanceList.urgency === 0?'background-color:#07c160' : 'background-color:#ee0a24'">
                 {{mainteanceList.urgency === 0?'普通维修':'紧急维修'}}
               </view>
             </view>
             <text class="date">{{mainteanceList.warrantyDate}}</text>
             <text class="state pending" v-if="mainteanceList.maintenanceStatus == 0">待派发</text>
             <text class="state processing" v-if="mainteanceList.maintenanceStatus==1">处理中</text>
             <text class="state audit" v-if="mainteanceList.maintenanceStatus==2">已完成-(待审核)</text>
             <text class="state pending" v-if="mainteanceList.maintenanceStatus==3">已完成-(已拒绝)</text>
             <text class="state audited" v-if="mainteanceList.maintenanceStatus==4">已完成-(已同意)</text>
             <text class="desc">{{mainteanceList.taskDescription}}</text>
             <text class="tishi" style="color: red;font-size: 12px;" v-if="mainteanceList.maintenanceStatus==2">(7天内未审核,系统将自动审核通过,请尽快审核!)</text>
             <view class="item-footer">
               <text class="delrepair" v-if="mainteanceList.maintenanceStatus == 0 && isDispatcher!=true"
                 @tap="deleteMeSend(mainteanceList.maintenanceCode)">删除报修</text>
                 <text class="delrepair" v-if="mainteanceList.maintenanceStatus <=1 && isDispatcher==true"
                   @tap="deleteMeSend(mainteanceList.maintenanceCode)">删除报修</text>
                 <text class="distribution" v-if="mainteanceList.maintenanceStatus == 0 && isDispatcher==true"
                   @tap="distribution(mainteanceList.maintenanceCode,mainteanceList.warrantyPersonId,1,mainteanceList.urgency)">派发维修员</text>
                   <text class="distribution" v-if="mainteanceList.maintenanceStatus == 1 && isDispatcher==true"
                     @tap="distribution(mainteanceList.maintenanceCode,mainteanceList.warrantyPersonId,2,mainteanceList.urgency)">重新派发</text>
               <text class="completed" v-if="mainteanceList.maintenanceStatus == 2"
                 @tap="updateApplyStatus(mainteanceList.maintenanceCode,mainteanceList.equipmentNo,mainteanceList.maintainerId)">维修完成审核</text>
               <text class="evaluateitem" v-if="mainteanceList.maintenanceStatus == 4"
                 @tap="userEvaluate(mainteanceList.maintenanceCode)"
                 :style="mainteanceList.maintainerEvaluate == null?'color: rgb(255, 170, 0);border: 1px solid rgb(255, 170, 0);' : 'color: rgb(148, 148, 148);border: 1px solid rgb(148, 148, 148);'">{{mainteanceList.maintainerEvaluate !=null?"查看评价":"维修评价"}}</text>
               <text class="queryitem" @tap="navDetail(mainteanceList.maintenanceCode,mainteanceList.warrantyPersonId)">查看详情</text>
             </view>
           </view>
         </view>
       </view>
</template>

<script>
  import {
    delTask,
    updateApplyStatus,
    updateTask,
    addMkMaintenanceList,
    sendScheduleMessage
  } from "@/api/system/task/task.js"
   import getDateTime from '../../../utils/getdateTime.js'
   import {
     getUserItme
   } from "@/api/system/user"
  export default {
    name: "maintenance-list",
    // 定义 props 属性，用来接收外界传递到当前组件的数据
    props: {
      // 父级传递过来对象
      mainteanceList: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
      isDispatcher:this.$auth.hasRole("dispatcher")
      }
    },
    onLoad(options) {
     
    },
    methods: {
  //查看详细页
      navDetail(mcode,userid) {
        this.$tab.navigateTo('/subpkg/maintenance/maintenance_item?mcode=' + mcode+"&userid="+userid)
      },
      userEvaluate(maintenanceCode) {
        this.$tab.navigateTo('/subpkg/maintenance/maintenance_evaluate?maintenanceCode=' +
          maintenanceCode)
      },
      //删除报修
      deleteMeSend(maintenanceCode) {
        this.$modal.confirm('确定删除此次报修申请吗？').then(() => {
          delTask(maintenanceCode).then(response => {
            if (response.code === 200) {
              this.$parent.empty()
              this.$parent.queryMyToList()
              this.$modal.msgSuccess("删除成功")
            }
          })
        })
      },
      //维修审核
      updateApplyStatus(maintenanceCode, equipmentNo, maintainerId) {
        const thant = this
        uni.showModal({
          title: '提示',
          content: '确定此次报修已经完成了吗？',
          confirmText: "确定",
          cancelText: "拒绝",
          success: function(res) {
            if (res.confirm) {
              const data = {
                maintenanceCode: maintenanceCode,
                maintenanceStatus: 4,
                equipmentNo: equipmentNo,
                endTime: getDateTime.dateTimeStr('y-m-d h:i:s')
              }
              const stateData = [{
                maintenanceCode: maintenanceCode,
                state: "用户审核通过",
                datetime: getDateTime.dateTimeStr('y-m-d h:i:s'),
                descs: ""
              }, {
                maintenanceCode: maintenanceCode,
                state: "待用户评价",
                datetime: getDateTime.dateTimeStr('y-m-d h:i:s'),
                descs: ""
              }]
              addMkMaintenanceList(stateData).then(response => {
                if (response.code == 200) {
                  updateTask(data).then(response => {
                    if (response.code === 200) {
                      getUserItme(maintainerId).then(response => {
                        if (response.code == 200 && response.data.openId != null) {
                          //新增成功调用接口
                          const messagedata = {
                            openid: response.data.openId,
                            selfPage: '/pages/login',
                            maintenanceCode: maintenanceCode,
                            maintenanceStatus: "用户已同意",
                            description: "用户已审核通过",
                          }
                          sendScheduleMessage(messagedata).then(response => {
                            thant.$parent.empty()
                            thant.$parent.queryMyToList()
                            if (response.errcode == 0) {
                              thant.$modal.msgSuccess("操作成功")
                            } else {
                              thant.$modal.msgError("订阅失败");
                            }
                          })
                        } else {
                          thant.$parent.empty()
                          thant.$parent.queryMyToList()
                          thant.$modal.msgSuccess("操作成功")
                        }
                      })
                    }
                  })
                }
              });
            } else {
              thant.$parent.maintenanceCode = maintenanceCode
              thant.$parent.maintainerId = maintainerId
              thant.$parent.$refs.inputDialog.open()
              thant.$parent.isDialog = true  
            }
          }
        })
      },
      //管理员点击派发人员
       distribution(maintenanceCode, warrantyPersonId,distributionType,urgency) {
         this.$parent.maintenanceCode = maintenanceCode
         this.$parent.distributionType=distributionType
         this.$parent.warrantyPersonId=warrantyPersonId
         this.$parent.urgency=urgency
         this.$parent.getuserList()
         this.$parent.$refs.popup.open()
       },
    },
   
  }
</script>

<style lang="scss">
  .card-item {
    margin: 20rpx;
    border-radius: 10rpx;
    position: relative;
  
    .item-content {
      background-color: white;
      display: flex;
      padding: 20rpx;
      position: relative;
  
      .left-box>image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
        border: 2px solid rgb(209, 209, 209);
      }
  
      .right-box {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-left: 20rpx;
  
        .floor {
          font-weight: bold;
          font-size: 32rpx;
  
          .level-tag {
            font-size: 23rpx;
            color: white;
            margin-left: 5px;
            padding: 5rpx 12rpx;
            display: inline-block;
            background-color: danger;
            width: 60px;
            text-align: center;
          }
        }
  
        .desc {
          font-size: 24rpx;
          margin: 5rpx 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
  
        .state {
          width: 50px;
          color: #fff;
          font-size: 28rpx;
          margin: 5rpx 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-align: center;
        }
  
        .pending {
          background-color: #ee0a24;
          width: 100px;
        }
  
        .processing {
          background-color: #ff976a;
        }
  
        .audit {
          background-color: #07c160;
          width: 100px;
        }
  
        .audited {
          background-color: #07c160;
          width: 100px;
        }
  
        .date {
          font-size: 25rpx;
          color: var(--color-text-second);
          margin-top: 5rpx;
        }
      }
  
      .item-footer {
        font-size: 28rpx;
        padding: 10rpx;
        text-align: right;
      }
  
      .item-footer>.delrepair {
        margin-left: 20rpx;
        border: 1px solid red;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
        color: red;
      }
      .item-footer>.distribution {
        margin-left: 20rpx;
        border: 1px solid orange;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
        color: orange;
      }
  
      .item-footer>.completed {
        margin-left: 20rpx;
        color: rgb(31, 134, 0);
        border: 1px solid rgb(31, 134, 0);
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
      }
  
      .item-footer>.evaluateitem {
        margin-left: 20rpx;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
      }
  
      .item-footer>.queryitem {
        margin-left: 20rpx;
        color: #1989FA;
        border: 1px solid #1989FA;
        padding: 5rpx 10rpx 5rpx 10rpx;
        border-radius: 15rpx;
      }
    }
  }
  
</style>